<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05_CSS显示模式</title>

  <style>
    div{
      width: 100px;
      height: 100px;
      border: 5px solid red;
      /*块级元素：默认高度为0，宽度为父级宽度的100%，可以设置宽高，竖着排*/
      display: block;
    }
    span{
      background-color: yellow;
      /*行内元素：无法设置宽高，横着排，大小由内容决定*/
      display: inline;
      /*可以设置他们的 块级还是行内*/
      display: block;
    }
    input,button{
      width: 200px;
      height: 50px;
      /*行内块元素：既能设置宽高，又横着排*/
      display: inline-block;
    }
    .d2:hover{
      /*元素消失：会脱离文档流，释放元素原来占据的页面布局*/
      display: none;
    }
  </style>

</head>
<body>

    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>
    <hr>
    <span>123456</span>
    <span>123456</span>
    <span>123456</span>
    <hr>
    <input type="text">
    <input type="text">
    <button>按钮</button>
</body>
</html>